<template>
  <div class="rank">
    <div class="title-wrapper">
      <p class="title">热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="header">
      <p class="top">排名</p>
      <p class="area">地区</p>
      <p class="num">预约数量</p>
    </div>
    <div class="rank-charts" ref="rankCharts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

let rankCharts = ref()

const weatherIcons = {
  Sunny: new URL('../../images/No1.png', import.meta.url).href,
  Cloudy: new URL('../../images/No2.png', import.meta.url).href,
  Showers: new URL('../../images/No3.png', import.meta.url).href,
  san: new URL('../../images/No4.png', import.meta.url).href,
  five: new URL('../../images/No5.png', import.meta.url).href,
} as const

const seriesLabel = {
  show: true,
} as const

onMounted(() => {
  let myChart = echarts.init(rankCharts.value)
  let option = {
    // title: {
    //   text: 'Weather Statistics',
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['City Alpha', 'City Beta', 'City Gamma'],
    },
    grid: {
      left: 100,
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false, // 隐藏 X 轴的轴线
      },
      splitLine: {
        show: false, // 隐藏网格线
      },
      axisTick: {
        show: false, // 隐藏 X 轴的刻度线
      },
    },
    yAxis: {
      type: 'category',
      inverse: true,
      data: ['Sunny', 'Cloudy', 'Showers', 'San', 'Five'],
      axisTick: {
        show: false, // 隐藏 Y 轴的刻度线
      },
      axisLine: {
        show: false, // 隐藏 Y 轴的轴线
      },
      splitLine: {
        show: false, // 隐藏网格线
      },
      axisLabel: {
        formatter: function (value: string) {
          return '{' + value + '| }\n{value|' + value + '}'
        },
        margin: 20,
        rich: {
          value: {
            lineHeight: 30,
            align: 'center',
          },
          Sunny: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.Sunny,
            },
          },
          Cloudy: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.Cloudy,
            },
          },
          Showers: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.Showers,
            },
          },
          San: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.san,
            },
          },
          Five: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.five,
            },
          },
        },
      },
    },
    series: [
      {
        // name: 'City Alpha',
        type: 'bar',
        data: [165, 170, 30, 45, 76],
        label: seriesLabel,
        markPoint: {
          symbolSize: 1,
          symbolOffset: [0, '50%'],
          label: {
            formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
            backgroundColor: 'rgb(242,242,242)',
            borderColor: '#aaa',
            borderWidth: 1,
            borderRadius: 4,
            padding: [4, 10],
            lineHeight: 26,
            position: 'right',
            distance: 20,
            rich: {
              a: {
                align: 'center',
                color: '#fff',
                fontSize: 18,
                textShadowBlur: 2,
                textShadowColor: '#000',
                textShadowOffsetX: 0,
                textShadowOffsetY: 1,
                textBorderColor: '#333',
                textBorderWidth: 2,
              },
              b: {
                color: '#333',
              },
              c: {
                color: '#ff8811',
                textBorderColor: '#000',
                textBorderWidth: 1,
                fontSize: 22,
              },
            },
          },
        },
      },
    ],
  }

  myChart.setOption(option)
})
</script>

<style lang="scss" scoped>
.rank {
  width: 100%;
  height: 100%;
  background: url('../../images/dataScreen-main-rt.png') no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;
  .title-wrapper {
    // margin-left: 20px;
    .title {
      color: white;
      font-size: 17px;
    }
  }
  .header {
    height: 45px;
    background: url('../../images/line-bg.png') no-repeat;
    background-size: 100% 100%;
    margin: 40px 10px 0px 10px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #d09657;
    font-weight: bold;
    font-size: 15px;

    .top {
      flex: 1;
    }
    .area {
      flex: 1;
    }
    .num {
      flex: 3;
    }
  }

  .rank-charts {
    height: calc(100% - 10px);
    // margin-top: 20px;
  }
}
</style>
